
<template>
  <div >
    <div class="page-city-trend-header">
      <div><span>上海</span> -> <span>上海</span></div>
      <div>
        <el-button type="primary" size="small">月环比</el-button>
        <el-button type="success" size="small">年同比</el-button>
      </div>
      <div>
        <el-select v-model="selectTime" size="small" placeholder="请选择日期">
          <el-option v-for="(item,index) in timeList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="warp1">
      <div class="tips">
        <span>市场活跃度指数</span>
        <span>0</span>
        <span class="bar"></span>
        <span>100</span>
      </div>
      <myChartWidth></myChartWidth>
    </div>
    <div style="font-size: 26px;padding: 15px 0">上海xxxxx 2022-03-29</div>
    <div class="warp2">
      <div class="left-map"><myMap></myMap></div>
      <div class="right-data">
        <div>
          <span>TOP20排名</span>
          <el-select size="small" v-model="timeChart" placeholder="请选择">
            <el-option v-for="(item1,index1) in timeChartList" :key="index1" :label="item1.label" :value="item1.value"></el-option>
          </el-select>
        </div>
        <div style="display: flex">
            <ul>
              <li v-for="item in 20" :key="item" style="padding: 3.8px 0">城市名{{item}}</li>
            </ul>
          <myChartCity></myChartCity>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import myChartWidth from '../../components/myChart/myChartWidth';
import myChartCity from "@/components/myChart/myChartCity";
import myMap from "@/components/myMap/myMap";
export default {
  name: "cityTrend",
  components: {
    myChartWidth,
    myMap,
    myChartCity
  },
  data() {
    return {
      trendType: 1,
      timeChart:1,
      selectTime: '',
      timeList: [
        {label: '7日',value: 7},
        {label: '30日',value: 30},
        {label: '180日',value: 180},
      ],
      timeChartList: [
        {label: '2022/03/26',value: 1},
        {label: '2022/03/27',value: 2},
        {label: '2022/03/28',value: 3},
      ]
    };
  },
  methods: {},
  mounted(){
  }
};
</script>

<style scoped lang="scss">
.page-city-trend-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 100px ;
}
.warp1{
  position: relative;
  .tips{
    position: absolute;
    right: 20px;
    top: 3px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666666;
    span:nth-child(1) {
      margin-right: 10px;
    }
    .bar{
      width: 120px;
      display: inline-block;
      height: 20px;
      background: linear-gradient(to right, #7FFFAA,#32CD32);
    }
  }
}
.warp2{
  display: flex;
  .left-map{
    flex: 2;
    margin-right: 20px;
  }
  .right-data{
    flex: 1;

  }
}
</style>
